<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./layui-v2.7.6/./layui/css/layui.css" />
    <link rel="stylesheet" href="../../../static/css/layui.css" th:href="@{/css/layui.css}" media="all" />
    <link rel="stylesheet" href="../../../static/css/style.css" th:href="@{/css/style.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/select2/select2.min.css"
      th:href="@{/ajax/libs/select2/select2.min.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/select2/select2-bootstrap.min.css"
      th:href="@{/ajax/libs/select2/select2-bootstrap.min.css}" />
    <link rel="stylesheet" href="../../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/jquery-layout/jquery.layout-latest.css"
      th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/bootstrap-table/bootstrap-table.min.css"
      th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" />
    <link rel="stylesheet" href="../../../static/css/animate.min.css" th:href="@{/css/animate.min.css}" />
    <link rel="stylesheet" href="../../../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css}" />
    <link rel="stylesheet" href="../../../static/css/add.css" th:href="@{/css/add.css}" />
    <link rel="stylesheet" href="../../../static/css/equipment.css" th:href="@{/css/equipment.css}" />
    <link rel="stylesheet" href="../../../static/css/oy-jichu.css" th:href="@{/css/oy-jichu.css}" />
    <link rel="stylesheet" href="../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/layui/css/modules/laydate/default/laydate.css" />
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
          rel="stylesheet"
          href="/js/layui/css/layui.css"
          th:href="@{/js/layui/css/layui.css}"
        />
        <link
          rel="stylesheet"
          href="/css/forecastview.css"
          th:href="@{/css/forecastview.css}"
        />
      </head>

      <body>
        <!-- 预警查询 -->
        <div class="container">
          <div class="rightCard">
            <div class="top layui-panel">
              <div class="layui-inline">
                <span class="times">时间</span>
                <input
                  type="text"
                  class="layui-input startTime"
                  autocomplete="off"
                  id="timer"
                  placeholder="选择时间"
                />
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">场景名称</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    name="sceneName"
                    placeholder="请输入场景名称"
                    autocomplete="off"
                    class="layui-input endTime"
                  />
                </div>
              </div>
              <div class="search">
                <!-- 下拉菜单 -->
                <div class="layui-form-item">
                  <label class="layui-form-label">预警方式</label>
                  <div class="layui-input-block">
                    <select
                      name="warningType"
                      lay-verify="required"
                      class="selects"
                    >
                      <option value="">请选择</option>
                      <option value="0">同比预警</option>
                      <option value="1">环比预警</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="layui-form-item set">
                <button
                  class="layui-btn layui-btn-sm layui-btn-primary layui-border-green"
                >
                <i class="fa fa-search"></i>
                  查询
                </button>
                <button
                  class="layui-btn layui-btn-sm layui-btn-primary layui-border-black"
                >
                <i class="fa fa-refresh"></i>
                  重置
                </button>
              </div>
            </div>
            <!-- 右卡片搜索位置 end -->
            <!-- 表格部分 start -->
            <div class="layui-panel tableBox">
              <table id="table" lay-filter="test"></table>
              <div id="pages" style="margin-left: 30%"></div>
            </div>
            <!-- 表格部分 end -->
          </div>
        </div>

        <!-- 树形组件 -->
        <div class="ui-layout-content">
          <div id="tree" class="ztree"></div>
        </div>
        <!-- 树形组件 -->

        <script src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
        <script
          src="/js/layui/layui.js"
          th:src="@{/js/layui/layui.js}"
        ></script>
        <script th:inline="javascript">
          // 表格部分
          $(function () {
            layui.use(
              ["table", "element", "layer", "laydate", "laypage"],
              function () {
                var laypage = layui.laypage;
                var page = {
                  pageNum: 1,
                  pageSize: 10,
                };
                /**
                 *
                 *  顶部搜索框
                 */
                $(".layui-border-green").on("click", function () {
                  let warningTime = $("#timer").val();
                  let sceneName = $("[name=sceneName]").val();
                  let warningType = $("[name=warningType]").val();
                  console.log(warningTime, sceneName, warningType, "datas");
                  $.ajax({
                    method: "post",
                    url: `/earlyWarningRecord/list2?warningTime=${warningTime}&warningRemark=${sceneName}&warningType=${warningType}`,
                    success: function (res) {
                      console.log(res, "searchres");
                      tableList(res);
                    },
                  });
                });
                /**
                 *
                 * 重置按钮
                 */
                $(".layui-border-black").on("click", function () {
                  $(".startTime").val("");
                  $(".endTime").val("");
                  $(".selects").val("");
                });
                var table = layui.table;
                var layer = layui.layer;
                //  时间搜索
                var laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                  elem: "#timer", //指定元素
                  isInitValue: false,
                  value: new Date(),
                });
                recordList();
                function recordList() {
                  $.ajax({
                    method: "post",
                    url: "/earlyWarningRecord/list2",
                    data: page,
                    success: function (res) {
                      console.log(res, "res");
                      tableList(res);
                    },
                  });
                }
                //表格实例
                function tableList(res) {
                  table.render({
                    elem: "#table",
                    height: 430,
                    data: res.rows,
                    cols: [
                      [
                        //表头
                        {
                          title: "序号",
                          width: "5%",
                          align: "center",
                          type: "numbers",
                        },
                        {
                          field: "sceneName",
                          title: "场景名称",
                          width: "15%",
                          align: "center",
                        },
                        {
                          field: "warningName",
                          title: "预警名称",
                          width: "15%",
                          align: "center",
                        },
                        {
                          field: "warningTime",
                          title: "预警时间",
                          width: "15%",
                          align: "center",
                        },
                        {
                          field: "warningRemark",
                          title: "预警说明",
                          width: "15%",
                          align: "center",
                        },
                        {
                          field: "alarmValue",
                          title: "几率值",
                          width: "10%",
                          align: "center",
                          templet: $("#alarmValueBox"),
                        },
                        {
                          field: "warningType",
                          title: "预警方式",
                          width: "10%",
                          align: "center",
                          templet: $("#pageBox"),
                        },
                        {
                          field: "words",
                          title: "操作",
                          templet: $("#toolEventDemo"),
                          align: "center",
                        },
                      ],
                    ],
                  });

                  // 分页功能
                  laypage.render({
                    elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
                    count: res.total, //数据总数，从服务端得到
                    curr: page.pageNum,
                    layout: ["prev", "page", "next", "skip"],
                    limit: page.pageSize,
                    jump: function (obj, first) {
                      //obj包含了当前分页的所有参数，比如：
                      console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                      console.log(obj.limit); //得到每页显示的条数
                      page.pageSize = obj.limit;
                      page.pageNum = obj.curr;
                      console.log(page, "page");
                      //首次不执行
                      if (!first) {
                        $.ajax({
                          method: "post",
                          url: "/earlyWarningRecord/list2",
                          data: page,
                          success: function (res) {
                            console.log(res, "res");
                            if (res.code == 0) {
                              tableList(res);
                            } else {
                              layui.layer.msg("获取数据失败", { icon: 2 });
                            }
                          },
                        });
                      }
                    },
                  });
                }
                tableList();
                /**
                 *  操作表格行事件
                 *
                 */
                table.on("tool(test)", function (obj) {
                  console.log(obj, "obj");
                  layui.layer.confirm("确定删除吗？", function (index) {
                    $.ajax({
                      method: "post",
                      url: `/youtian/failureRateMonitor/remove?ids=${obj.data.id}`,
                      success: function (res) {
                        console.log(res, "delres");
                      },
                    });
                    obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                    layui.layer.close(index);
                  });
                });
              }
            );
          });
        </script>
        <script type="text/html" id="stateCheckbox">
          <input type="checkbox" name="switch" lay-skin="switch" />
        </script>
        <script type="text/html" id="toolEventDemo">
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
            ><i class="fa fa-remove"></i>删除</a
          >
        </script>
        <script type="text/html" id="pageBox">
          {{# if(d.warningType == 0){ }} 同比预警 {{# } }} {{# if(d.warningType
          == 1){ }} 环比预警 {{# } }}

        </script>
        <script type="text/html" id="alarmValueBox">
          {{ d.alarmValue * 100 + "%"}}
        </script>
      </body>
    </html>
  </body>
</html>
